<template>
  <div class="login_from" v-if="isAlive">
    <van-form @submit="onSubmit">
      <van-field
        class="textinput"
        v-model="username"
        name="uname"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        class="textinput"
        v-model="password"
        type="password"
        name="pwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div>
        <yanzheng></yanzheng>
      </div>
      <div style="margin: 16px">
        <van-button
          class="submit"
          round
          block
          type="info"
          native-type="submit"
          >{{ logintitle }}</van-button
        >
        <slot name="verificationbtn"></slot>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import yanzheng from './yanzheng'

export default {
  components:{
    yanzheng
  },
  props: ["logintitle"],
  provide(){
    return{
      reload:this.reload
    }
  },
  mounted(){
   
  },
  data() {
    return {
      isAlive:true,
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      // console.log("submit", values);
      let user = JSON.parse(sessionStorage.getItem("uname"));
      if(user==null){
        
         Dialog.alert({
          message: "请先注册哦",
          theme: "round-button",
          confirm
        }).then(() => {
          // on close
          this.reload()
          console.log("刷新");
        });
        this.$store.state.confirmSuccess=false
        return
      }
      if (this.username == user.uname && this.password == user.pwd&&this.$store.state.confirmSuccess==true) {
        this.$router.push("/home")
        this.$store.state.confirmSuccess=false
        this.$store.commit('userflag')
        //存一个登录的状态
        sessionStorage.setItem("userflag",true);
      }else if(this.$store.state.confirmSuccess==false){
        Dialog.alert({
          message: "请滑动验证",
          theme: "round-button",
          confirm
        }).then(() => {
          // on close
          this.reload()
          console.log("刷新");
        });
        return
      } else
       {
        Dialog.alert({
          message: "账户或密码输入有误",
          theme: "round-button",
          confirm
        }).then(() => {
          // on close
          this.reload()
          console.log("刷新");
        });
        
        this.$store.state.confirmSuccess=false
      }
      console.log(user);
    },
    //刷新子组件的方法
    reload(){
      this.isAlive=false;
      this.$nextTick(function(){
        this.isAlive=true
      })
    }
  },
};
</script>

<style lang="less" scoped>
.login_from {
  // .textinput {
  //   height: 100px;
  //   line-height: 50px;
  //   margin-top: 25px;
  // }
  .submit {
    background-color: #fb2c48;
    height: 79px;
    border-radius: 0;
    border: none;
    margin-top: 122px;
  }
  .verification_code {
    background-color: #cccccc;
    height: 79px;
    border-radius: 0;
    border: none;
    margin-top: 40px;
    color: #333333;
  }
}
</style>